/* UC系统暗黑模式全局样式 */

/* 基础主题变量 */
:root {
  --uc-bg-primary: #FFFFFF;
  --uc-bg-secondary: #F8F9FA;
  --uc-bg-tertiary: #E9ECEF;
  --uc-bg-glass: rgba(255, 255, 255, 0.8);
  --uc-text-primary: #1D1D1F;
  --uc-text-secondary: #48484A;
  --uc-text-tertiary: #8E8E93;
  --uc-border-primary: #D1D5DB;
  --uc-border-secondary: #E5E7EB;
  --uc-accent-primary: #007AFF;
  --uc-accent-secondary: #5856D6;
  --uc-success: #67C23A;
  --uc-warning: #E6A23C;
  --uc-error: #F56C6C;
  --uc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --uc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --uc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
  --uc-bg-primary: #1C1C1E;
  --uc-bg-secondary: #2C2C2E;
  --uc-bg-tertiary: #3A3A3C;
  --uc-bg-glass: rgba(28, 28, 30, 0.8);
  --uc-text-primary: #F2F2F7;
  --uc-text-secondary: #A1A1AA;
  --uc-text-tertiary: #6B7280;
  --uc-border-primary: #38383A;
  --uc-border-secondary: #48484A;
  --uc-accent-primary: #0A84FF;
  --uc-accent-secondary: #5E5CE6;
  --uc-success: #30D158;
  --uc-warning: #FF9F0A;
  --uc-error: #FF453A;
  --uc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --uc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --uc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* 全局暗黑模式基础样式 */
.dark {
  background-color: var(--uc-bg-primary);
  color: var(--uc-text-primary);
}

/* 滚动条暗黑模式 */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--uc-bg-secondary);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--uc-bg-tertiary);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--uc-border-primary);
}

/* Element Plus 组件暗黑模式覆盖 */

/* 卡片组件 */
.dark .el-card {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-card__header {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-card__body {
  color: var(--uc-text-primary);
}

/* 按钮组件 */
.dark .el-button {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-button:hover {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-accent-primary);
}

.dark .el-button--primary {
  background-color: var(--uc-accent-primary);
  border-color: var(--uc-accent-primary);
  color: white;
}

.dark .el-button--primary:hover {
  background-color: var(--uc-accent-secondary);
  border-color: var(--uc-accent-secondary);
}

.dark .el-button--success {
  background-color: var(--uc-success);
  border-color: var(--uc-success);
  color: white;
}

.dark .el-button--warning {
  background-color: var(--uc-warning);
  border-color: var(--uc-warning);
  color: white;
}

.dark .el-button--danger {
  background-color: var(--uc-error);
  border-color: var(--uc-error);
  color: white;
}

/* 输入框组件 */
.dark .el-input {
  background-color: var(--uc-bg-secondary);
}

.dark .el-input__wrapper {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  box-shadow: none;
}

.dark .el-input__wrapper:hover {
  border-color: var(--uc-accent-primary);
}

.dark .el-input__wrapper.is-focus {
  border-color: var(--uc-accent-primary);
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
}

.dark .el-input__inner {
  background-color: transparent;
  color: var(--uc-text-primary);
}

.dark .el-input__inner::placeholder {
  color: var(--uc-text-tertiary);
}

/* 选择器组件 */
.dark .el-select {
  background-color: var(--uc-bg-secondary);
}

.dark .el-select .el-input__wrapper {
  background-color: var(--uc-bg-secondary);
}

.dark .el-select-dropdown {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  box-shadow: var(--uc-shadow-lg);
}

.dark .el-select-dropdown__item {
  color: var(--uc-text-primary);
}

.dark .el-select-dropdown__item:hover {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-select-dropdown__item.is-selected {
  background-color: var(--uc-accent-primary);
  color: white;
}

/* 下拉菜单 */
.dark .el-dropdown-menu {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  box-shadow: var(--uc-shadow-lg);
}

.dark .el-dropdown-menu__item {
  color: var(--uc-text-primary);
}

.dark .el-dropdown-menu__item:hover {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-dropdown-menu__item.is-disabled {
  color: var(--uc-text-tertiary);
}

/* 标签页 */
.dark .el-tabs__header {
  background-color: var(--uc-bg-secondary);
}

.dark .el-tabs__nav {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
}

.dark .el-tabs__item {
  background-color: var(--uc-bg-secondary);
  color: var(--uc-text-secondary);
  border-color: var(--uc-border-primary);
}

.dark .el-tabs__item:hover {
  color: var(--uc-accent-primary);
}

.dark .el-tabs__item.is-active {
  background-color: var(--uc-bg-primary);
  color: var(--uc-accent-primary);
  border-color: var(--uc-accent-primary);
}

.dark .el-tabs__content {
  background-color: var(--uc-bg-primary);
  color: var(--uc-text-primary);
}

/* 表格组件 */
.dark .el-table {
  background-color: var(--uc-bg-secondary);
  color: var(--uc-text-primary);
}

.dark .el-table__header {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-table__header th {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-table__body tr {
  background-color: var(--uc-bg-secondary);
}

.dark .el-table__body tr:hover {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-table__body td {
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

/* 分页组件 */
.dark .el-pagination {
  color: var(--uc-text-primary);
}

.dark .el-pagination .el-pager li {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-pagination .el-pager li:hover {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-pagination .el-pager li.is-active {
  background-color: var(--uc-accent-primary);
  color: white;
}

.dark .el-pagination .btn-prev,
.dark .el-pagination .btn-next {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-pagination .btn-prev:hover,
.dark .el-pagination .btn-next:hover {
  background-color: var(--uc-bg-tertiary);
}

/* 加载中组件 */
.dark .el-loading-mask {
  background-color: rgba(28, 28, 30, 0.8);
}

.dark .el-loading-spinner {
  color: var(--uc-accent-primary);
}

/* 消息提示 */
.dark .el-message {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
  box-shadow: var(--uc-shadow-lg);
}

.dark .el-message--success {
  background-color: rgba(48, 209, 88, 0.1);
  border-color: var(--uc-success);
  color: var(--uc-success);
}

.dark .el-message--warning {
  background-color: rgba(255, 159, 10, 0.1);
  border-color: var(--uc-warning);
  color: var(--uc-warning);
}

.dark .el-message--error {
  background-color: rgba(255, 69, 58, 0.1);
  border-color: var(--uc-error);
  color: var(--uc-error);
}

/* 通知组件 */
.dark .el-notification {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
  box-shadow: var(--uc-shadow-lg);
}

.dark .el-notification__title {
  color: var(--uc-text-primary);
}

.dark .el-notification__content {
  color: var(--uc-text-secondary);
}

/* 对话框 */
.dark .el-dialog {
  background-color: var(--uc-bg-secondary);
  border: 1px solid var(--uc-border-primary);
}

.dark .el-dialog__header {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
}

.dark .el-dialog__title {
  color: var(--uc-text-primary);
}

.dark .el-dialog__body {
  background-color: var(--uc-bg-secondary);
  color: var(--uc-text-primary);
}

.dark .el-dialog__footer {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
}

/* 抽屉 */
.dark .el-drawer {
  background-color: var(--uc-bg-secondary);
  color: var(--uc-text-primary);
}

.dark .el-drawer__header {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-drawer__body {
  background-color: var(--uc-bg-secondary);
  color: var(--uc-text-primary);
}

/* 菜单组件 */
.dark .el-menu {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
}

.dark .el-menu-item {
  background-color: var(--uc-bg-secondary);
  color: var(--uc-text-primary);
  border-color: var(--uc-border-primary);
}

.dark .el-menu-item:hover {
  background-color: var(--uc-bg-tertiary);
  color: var(--uc-accent-primary);
}

.dark .el-menu-item.is-active {
  background-color: var(--uc-accent-primary);
  color: white;
}

.dark .el-sub-menu__title {
  background-color: var(--uc-bg-secondary);
  color: var(--uc-text-primary);
}

.dark .el-sub-menu__title:hover {
  background-color: var(--uc-bg-tertiary);
  color: var(--uc-accent-primary);
}

/* 表单组件 */
.dark .el-form-item__label {
  color: var(--uc-text-primary);
}

.dark .el-form-item__error {
  color: var(--uc-error);
}

/* 开关组件 */
.dark .el-switch {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
}

.dark .el-switch__core {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
}

.dark .el-switch.is-checked .el-switch__core {
  background-color: var(--uc-accent-primary);
}

/* 滑块组件 */
.dark .el-slider__runway {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-slider__bar {
  background-color: var(--uc-accent-primary);
}

.dark .el-slider__button {
  background-color: var(--uc-accent-primary);
  border-color: var(--uc-accent-primary);
}

/* 进度条组件 */
.dark .el-progress-bar__outer {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-progress-bar__inner {
  background-color: var(--uc-accent-primary);
}

/* 穿梭框 */
.dark .el-transfer {
  color: var(--uc-text-primary);
}

.dark .el-transfer-panel {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
}

.dark .el-transfer-panel__header {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

/* 时间选择器 */
.dark .el-time-panel {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  box-shadow: var(--uc-shadow-lg);
}

.dark .el-time-panel__header {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
}

.dark .el-time-spinner__item {
  color: var(--uc-text-primary);
}

.dark .el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-time-spinner__item.is-active {
  background-color: var(--uc-accent-primary);
  color: white;
}

/* 日期选择器 */
.dark .el-date-picker {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
}

.dark .el-picker-panel {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
  box-shadow: var(--uc-shadow-lg);
}

.dark .el-picker-panel__header {
  border-color: var(--uc-border-primary);
}

.dark .el-date-table th {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-date-table td {
  color: var(--uc-text-primary);
}

.dark .el-date-table td.today span {
  color: var(--uc-accent-primary);
}

.dark .el-date-table td.current:not(.is-disabled) span {
  background-color: var(--uc-accent-primary);
  color: white;
}

.dark .el-date-table td.available:hover {
  background-color: var(--uc-bg-tertiary);
}

/* 上传组件 */
.dark .el-upload {
  border-color: var(--uc-border-primary);
}

.dark .el-upload-dragger {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  color: var(--uc-text-primary);
}

.dark .el-upload-dragger:hover {
  background-color: var(--uc-bg-tertiary);
  border-color: var(--uc-accent-primary);
}

/* 评分组件 */
.dark .el-rate__text {
  color: var(--uc-text-primary);
}

/* 颜色选择器 */
.dark .el-color-picker {
  border-color: var(--uc-border-primary);
}

.dark .el-color-dropdown {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
  box-shadow: var(--uc-shadow-lg);
}

/* 级联选择器 */
.dark .el-cascader-panel {
  background-color: var(--uc-bg-secondary);
  border-color: var(--uc-border-primary);
}

.dark .el-cascader-node {
  color: var(--uc-text-primary);
}

.dark .el-cascader-node:hover {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-cascader-node.is-active {
  background-color: var(--uc-accent-primary);
  color: white;
}

/* Tree组件 */
.dark .el-tree {
  background-color: var(--uc-bg-secondary);
  color: var(--uc-text-primary);
}

.dark .el-tree-node__content:hover {
  background-color: var(--uc-bg-tertiary);
}

.dark .el-tree-node__content.is-focusable {
  color: var(--uc-text-primary);
}

/* 自定义UC系统特定组件暗黑模式 */

/* 玻璃态效果 */
.glass-light {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
  background: rgba(28, 28, 30, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 登录页面特定样式 */
.dark .login-container {
  background: linear-gradient(135deg, #1C1C1E 0%, #2C2C2E 100%);
}

.dark .login-card {
  background: var(--uc-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .login-title {
  color: var(--uc-text-primary);
}

.dark .login-subtitle {
  color: var(--uc-text-secondary);
}

/* 评分页面特定样式 */
.dark .scoring-container {
  background: var(--uc-bg-primary);
  color: var(--uc-text-primary);
}

.dark .image-upload-area {
  background: var(--uc-bg-secondary);
  border: 2px dashed var(--uc-border-primary);
  color: var(--uc-text-secondary);
}

.dark .image-upload-area:hover {
  background: var(--uc-bg-tertiary);
  border-color: var(--uc-accent-primary);
}

.dark .results-panel {
  background: var(--uc-bg-secondary);
  border: 1px solid var(--uc-border-primary);
}

.dark .severity-tag {
  border: 1px solid var(--uc-border-primary);
}

.dark .confidence-chart {
  background: var(--uc-bg-secondary);
}

/* 响应式暗黑模式调整 */
@media (max-width: 768px) {
  .dark .mobile-menu {
    background-color: var(--uc-bg-secondary);
    border-color: var(--uc-border-primary);
  }

  .dark .mobile-drawer {
    background-color: var(--uc-bg-secondary);
  }
}

/* 特殊组件覆盖 */
.dark .el-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

.dark .el-overlay-dialog {
  backdrop-filter: blur(4px);
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .dark {
    --uc-bg-primary: #000000;
    --uc-bg-secondary: #1C1C1E;
    --uc-text-primary: #FFFFFF;
    --uc-border-primary: #FFFFFF;
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  .dark *,
  .dark *::before,
  .dark *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 深色模式过渡动画 - 优化性能：仅对需要的元素应用过渡 */
.el-button,
.el-input,
.el-card,
.el-dialog,
.el-drawer,
.el-dropdown,
.el-menu-item,
.el-table,
.el-pagination,
.el-select,
.el-date-picker,
.el-time-picker,
.el-switch,
.el-radio,
.el-checkbox,
.el-tag,
.el-badge,
.el-tooltip,
.el-popover,
.el-message,
.el-notification,
.el-loading-mask,
.form-container,
.table-container,
.upload-container,
.command-palette-container,
.vanta-bg,
.glass-card,
.smart-cockpit-grid,
.portal-container {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 动画元素的GPU加速优化 */
.v-motion-slide-visible,
.v-motion-scale-visible,
.v-motion-fade-visible,
.command-palette-overlay,
.glass-card {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateZ(0);
}